{% block sw_product_variant_info %}
<span
    v-tooltip="{
        message: helpText,
        width: tooltipWidth,
        disabled: !showTooltip || !(helpText && helpText.length > 0)
    }"
    class="sw-product-variant-info"
>
    <span class="sw-product-variant-info__text">

        {% block sw_product_variant_info_product_name %}
        <span class="sw-product-variant-info__product-name">
            <sw-highlight-text
                v-if="highlighted"
                :text="getFirstSlot()"
                :search-term="searchTerm"
            />
            <slot v-else></slot>
        </span>
        {% endblock %}

        {% block sw_product_variant_info_options %}
        <template v-if="variations && variations.length > 0">
            <span
                v-for="(variation, index) in variations"
                :key="variation.group"
                class="sw-product-variant-info__specification"
            >
                <template v-if="index === 0 && !ommitParenthesis">(</template>

                {% block sw_product_variant_info_options_text %}
                <span>{{ variation.group }}</span>: {{ variation.option }}
                {% endblock %}

                <template v-if="index !== Object.keys(variations).length - 1">{{ seperator }}</template>

                <template v-if="index === Object.keys(variations).length - 1 && !ommitParenthesis">)</template>
            </span>
        </template>
        {% endblock %}

    </span>
</span>
{% endblock %}
